$f: 19.2;


.home {

  img{
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
  }

  .common_bg{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .section1{
    height: 100vh;
    .fix{
      height: 100vh;
      position: sticky;
      top: 0;
      left: 0;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      .wrap{
        width: 1350/$f+vw;
        .img{
          width: 100%;
          height: 560/$f+vw;
          margin: 0 0 26/$f+vw;
          position: relative;
          img{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
            &.on{
              display: block;
            }
          }
        }
        .title{
          color: #000;
          font-size: 64/$f+vw;
          font-style: normal;
          font-weight: 500;
          letter-spacing: 0.1px;
          text-transform: capitalize;
          text-align: center;
        }
      }
    }
  }

  .section2{
    padding: 100/$f+vw 240/$f+vw 0 240/$f+vw;
    position: relative;
    z-index: 12;
    overflow: hidden;
    .scroll_move{
      position: absolute;
      top: 214px;
      left: 0;
      z-index: -1;
      transform-origin: top left;
      svg{
        width: 1920px;
      }
      .move{
        position: absolute;
        top: 0;
        left: 0;
        width: 43px;
        offset-path: path("M1909 21.0003C1782.5 -8 1441.84 -23.3883 1252.88 113.244C1089.01 231.736 1526.56 386.272 1132.88 436.244C971.382 456.744 754.132 489.488 789.382 639.244C824.631 789 1185.33 1412.9 756.131 1416.5C219.631 1421 107 1306 1.50006 1679.5");
        offset-distance: 0%;
        transform: rotate(180deg) translate(0px, -33px);
        svg{
          width: 100%;
        }
      }
    }
    .content1{
      display: flex;
      justify-content: space-between;
      .l{
        width: 738/$f+vw;
        height: 456/$f+vw;
        border-radius: 20/$f+vw;
        background: linear-gradient(0deg, #F5F5F5 0%, #F5F5F5 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 62/$f+vw 0 0;
        .bor{
          width: 455/$f+vw;
          height: 300/$f+vw;
          position: relative;
          z-index: 1;
          border-radius: 15/$f+vw;
          border: 6/$f+vw solid #000;
          background: #D9D9D9;
          overflow: hidden;
          .scale{
            position: absolute;
            left: 58/$f+vw;
            top: 76px;
            z-index: 1;
            width: 194px;
            transform-origin: top left;
            .svg1{
              width: 194px;
            }
            .svg2{
              width: 194px;
              position: absolute;
              left: 0px;
              bottom: 10px;
            }
            .svg3{
              position: absolute;
              left: -12px;
              bottom: 0;
              width: 24px;
            }
            .svg4{
              position: absolute;
              top: 29px;
              right: -11px;
              width: 24px;
            }
            .move{
              position: absolute;
              left: 0;
              top: 0;
              offset-path: path("M1 132.5C1.66667 120.667 6.3 95.3999 19.5 88.9999C36 80.9999 35 77.9999 46 67.9999C57 57.9999 82.5 30.4999 88 23.4999C93.5 16.4999 99 -1.00005 110 0.999949C121 2.99995 124.5 20 132 28C139.5 36 186.5 43 195.5 41.5");
              offset-distance: 100%;
              transform: rotate(47deg) translateY(-11px);
              animation: 10s move2Animate linear infinite;
              img{
                display: block;
              }
              .img1{
                width: 18px;
                margin: 0 0 3px;
              }
              .img2{
                width: 18px;
              }
            }
          }
          .position{
            position: absolute;
            top: 14/$f+vw;
            right: 10/$f+vw;
            width: 156/$f+vw;
            height: 222/$f+vw;
            background: #FFF;
            padding: 6/$f+vw 12/$f+vw;
            .p1{
              color: #000;
              text-align: justify;
              font-size: 12/$f+vw;
              font-style: normal;
              font-weight: 500;
              line-height: 150%; /* 18px */
              letter-spacing: 0.1px;
              text-transform: capitalize;
            }
            .p2{
              color: rgba(0, 0, 0, 0.60);
              text-align: justify;
              font-size: 8/$f+vw;
              font-style: normal;
              font-weight: 400;
              line-height: 150%; /* 12px */
              letter-spacing: 0.1px;
              text-transform: capitalize;
            }
            .line_con{
              margin: 23/$f+vw 0 0 0;
              position: relative;
              z-index: 1;
              .more_joke{
                position: absolute;
                top: 17/$f+vw;
                right: 0;
                z-index: 21;
                .more{
                  width: 33.017/$f+vw;
                  height: 13.545/$f+vw;
                  border-radius: 6.773/$f+vw;
                  background: #00C043;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  color: #FFF;
                  text-align: justify;
                  font-size: 6.773/$f+vw;
                  font-style: normal;
                  font-weight: 500;
                  line-height: 150%; /* 10.159px */
                  letter-spacing: 0.085px;
                  text-transform: capitalize;
                  &.on{
                    background: #D54B35;
                    margin: 3/$f+vw 0 0;
                  }
                }
              }
              &:after{
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 1px;
                height: 100%;
                background: #E6E6E6;
                z-index: -1;
              }
              .line_black{
                width: 114.29/$f+vw;
                height: 3.386/$f+vw;
                border-radius: 1.693/$f+vw;
                background: #D9D9D9;
                display: flex;
                margin: 0 0 10/$f+vw 10/$f+vw;
                div{
                  width: 76.193/$f+vw;
                  height: 3.386/$f+vw;
                  border-radius: 1.693/$f+vw;
                  background: #000;
                }
                img{
                  width: 11/$f+vw;
                  height: 11/$f+vw;
                  position: relative;
                  max-height: unset;
                  max-width: unset;
                  top: 50%;
                  transform: translateY(-50%);
                }
              }
              .list{
                padding: 0 0 0 10/$f+vw;
                color: rgba(0, 0, 0, 0.60);
                text-align: justify;
                font-size: 5.926/$f+vw;
                font-style: normal;
                font-weight: 400;
                line-height: 150%; /* 8.889px */
                letter-spacing: 0.085px;
                text-transform: capitalize;
                position: relative;
                img{
                  width: 6/$f+vw;
                  position: absolute;
                  left: 3/$f+vw;
                  top: 0;
                }
                &.on{
                  &:after{
                    background: #00C043;
                  }
                }
                &:after{
                  content: '';
                  position: absolute;
                  width: 3/$f+vw;
                  height:3/$f+vw;
                  border-radius: 50%;
                  background: #D9D9D9;
                  top: 2/$f+vw;
                  left: -1/$f+vw;
                }
                &:not(:last-child) {
                  margin: 0 0 10/$f+vw;
                }
              }
            }
          }
          .common_bg{
            object-fit: contain;
            transform: scale(1.05);
          }
        }
      }
      .r{
        width: 640/$f+vw;
        margin: 84/$f+vw 0 0 0;
        .p1{
          color: rgba(0, 0, 0, 0.90);
          font-size: 40/$f+vw;
          font-style: normal;
          font-weight: 300;
          line-height: 150%; /* 60px */
          letter-spacing: 0.1px;
          margin: 0 0 120/$f+vw;
          font-family: "Montserrat";
        }
        .p2{
          color: rgba(0, 0, 0, 0.90);
          font-size: 18/$f+vw;
          font-style: normal;
          font-weight: 300;
          line-height: 150%; /* 27px */
          letter-spacing: 0.1px;
        }
      }
    }
    .content2{
      display: flex;
      justify-content: space-between;
      flex-direction: row-reverse;
      margin: 200/$f+vw 0 0 0;
      .l{
        width: 738/$f+vw;
        height: 456/$f+vw;
        border-radius: 20/$f+vw;
        background: linear-gradient(0deg, #F5F5F5 0%, #F5F5F5 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 0 0 62/$f+vw;
        .bor{
          width: 455/$f+vw;
          height: 300/$f+vw;
          position: relative;
          z-index: 1;
          border-radius: 15/$f+vw;
          border: 6/$f+vw solid #000;
          background: #D9D9D9;
          overflow: hidden;
          .common_bg{
            object-fit: contain;
            transform: scale(1.05);
          }
          .scale{
            position: absolute;
            right: 0;
            bottom: -5px;
            z-index: 1;
            width: 384px;
            transform-origin: right bottom;
            .path{
              width: 384px;
            }
            .point{
              width: 11px;
              position: absolute;
              bottom: 88px;
              left: 41px;
            }
            @keyframes moveAnimate {
              0%{
                offset-distance: 100%;
              }
              100%{
                offset-distance: 0%;
              }
            }
            @keyframes move2Animate {
              0%{
                offset-distance: 0%;
              }
              100%{
                offset-distance: 100%;
              }
            }
            .move{
              position: absolute;
              left: 0;
              top: 0;
              width: 37px;
              height: 37px;
              border-radius: 50%;
              background: rgba(64, 132, 239,.2);
              display: flex;
              align-items: center;
              justify-content: center;
              offset-path: path("M2 264C3.31962 240.452 12.491 190.171 38.6195 177.435C71.2802 161.515 69.3008 155.545 91.0746 135.645C112.848 115.745 163.324 61.0198 174.211 47.0898C185.098 33.1598 195.985 -1.66528 217.758 2.31472C239.532 6.29473 246.46 40.1249 261.306 56.0449C276.152 71.9649 369.185 85.8949 387 82.9099");
              offset-distance: 100%;
              transform: rotate(47deg);
              animation: 10s moveAnimate linear infinite;
              img{
                width: 28px;
              }
            }
          }

        }
      }
      .r{
        width: 640/$f+vw;
        margin: 84/$f+vw 0 0 0;
        .p1{
          color: rgba(0, 0, 0, 0.90);
          font-size: 40/$f+vw;
          font-style: normal;
          font-weight: 300;
          line-height: 150%; /* 60px */
          letter-spacing: 0.1px;
          font-family: "Montserrat";
          margin: 0 0 87/$f+vw;
        }
        .p2{
          color: rgba(0, 0, 0, 0.90);
          font-size: 18/$f+vw;
          font-style: normal;
          font-weight: 300;
          line-height: 150%; /* 27px */
          letter-spacing: 0.1px;
        }
      }
    }

    .content3{
      width: 100%;
      margin: 160/$f+vw 0 0 0 ;
      .swiper1{
        .swiper-slide{
          img{
            width: 100%;
            border-radius: 40/$f+vw;
          }
        }
      }

      .end{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin: 30/$f+vw 0 0 0;
        .swiper-pagination{
          position: static;
          width: 263/$f+vw;
          height: 3/$f+vw;
          background: #F5F5F5;
          .swiper-pagination-progressbar-fill{
            background: #000;
          }
        }
        .num{
          display: flex;
          align-items: center;
          margin: 0 0 0 20/$f+vw;
          p,span{
            color: rgba(0, 0, 0, 0.90);
            font-size: 16/$f+vw;
            font-style: normal;
            font-weight: 600;
          }
        }
      }

      .text{
         margin-bottom: 60/$f+vw;
        .p1{
          color: rgba(0, 0, 0, 0.90);
          font-size: 40/$f+vw;
          font-style: normal;
          font-weight: 300;
          line-height: 150%; /* 60px */
          letter-spacing: 0.1px;
          margin: 0 0 12/$f+vw;
          font-family: "Montserrat";
        }
        .p2{
          color: rgba(0, 0, 0, 0.60);
          font-size: 18/$f+vw;
          font-style: normal;
          font-weight: 300;
          line-height: 150%; /* 27px */
          letter-spacing: 0.1px;
          margin: 0 0 12/$f+vw;
        }
        .p3{
          width: 1377/$f+vw;
          color: rgba(0, 0, 0, 0.90);
          font-size: 18/$f+vw;
          font-style: normal;
          font-weight: 300;
          line-height: 150%; /* 27px */
          letter-spacing: 0.1px;
        }
      }

    }
  }

  .section3{
    padding: 150/$f+vw 240/$f+vw 160/$f+vw 240/$f+vw;
    .title{
      .p1{
        color: rgba(0, 0, 0, 0.90);
        font-size: 40/$f+vw;
        font-style: normal;
        font-weight: 300;
        line-height: 150%; /* 60px */
        letter-spacing: 0.1px;
        margin: 0 0 40/$f+vw;
        font-family: "Montserrat";
      }
      .p2{
        color: rgba(0, 0, 0, 0.90);
        font-size: 18/$f+vw;
        font-style: normal;
        font-weight: 300;
        line-height: 150%; /* 27px */
        letter-spacing: 0.1px;
      }
    }
    .content{
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: 21/$f+vw;
      margin: 87/$f+vw 0 0 0 ;
      .item{
        width: 100%;
        height: 253/$f+vw;
        background: #F5F5F5;
        border-radius: 20/$f+vw;
        padding: 32/$f+vw 40/$f+vw 40/$f+vw;
        display: flex;
        justify-content: space-between;
        transition: .6s ease;
        &:hover{
          background: #FFF;
          box-shadow: 4px 4px 30px rgba(0, 0, 0, 0.06);
          .l{
            .t1{
              opacity: 1;
            }
          }
        }
        .l{
          width: 274/$f+vw;
          .t1{
            color: rgba(0, 0, 0, 0.90);
            font-size: 14/$f+vw;
            font-style: normal;
            font-weight: 300;
            line-height: 150%; /* 21px */
            letter-spacing: 0.1px;
            margin: 0 0 17/$f+vw;
            opacity: 0;
            transition: .6s ease;
          }
          .t2{
            color: rgba(0, 0, 0, 0.90);
            font-size: 24/$f+vw;
            font-style: normal;
            font-weight: 500;
            line-height: 150%; /* 36px */
            letter-spacing: 0.1px;
          }
        }
        .bor{
          width: 88/$f+vw;
          height: 88/$f+vw;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1/$f+vw solid #D9D9D9;
          img{
            object-fit: contain;
          }
        }
      }
    }
  }


  @media screen and (max-width: 1024px) {
    padding-top: 60px;

    .section1{
      .fix{
        .wrap{
          width: 90%;
          .img{
            margin: 0 0 10px;
          }
          .title{
            font-size: 24px;
          }
        }
      }
    }
    .section2{
      padding: 25px 5%;
      .scroll_move{
        display: none;
      }
      .content1{
        flex-direction: column;
        .l{
          width: 100%;
          height: auto;
          padding: 20px;
          border-radius: 10px;
          margin: 0!important;
          .bor{
            width: 100%;
            height: 180px;
            border-radius: 10px;
            border: 3px solid #000;
            .common_bg{
              transform: scale(1.1);
            }
            .position{
              // display: none;
              width: 156px;
              height: 100px;
              padding: 6px 12px;
              .p1{
                font-size: 12px;
              }
              .p2{
                font-size: 8px;
              }
              .line_con{
                margin: 10px 0 0 0;
                .more_joke{
                  top:17px;
                  .more{
                    width: 33px;
                    height: 13px;
                    border-radius: 7px;
                    font-size: 8px;
                    &.on{
                      margin: 5px 0 0 ;
                    }
                  }
                }
                .line_black{
                  width: 114px;
                  height: 2px;
                  border-radius: 2px;
                  margin: 0 0 10px 10px;
                  div{
                    width: 76px;
                    height: 2px;
                  }
                  img{
                    width: 11px;
                    height: 11px;
                  }
                }
                .list{
                  padding: 0 0 0 10px;
                  font-size: 5px;
                  img{
                    width: 6px;
                    left: 3px;
                  }
                  &::after{
                    width: 3px;
                    height: 3px;
                    top:2px;
                    left: -1px;
                  }
                }
              }
            }
          }
        }
        .r{
          width: 100%;
          margin: 25px 0 0 0;
          .p1{
            font-size: 20px;
            margin: 0 0 15px;
          }
          .p2{
            font-size: 13px;
            line-height: 1.8;
          }
        }
      }
      .content2{
        flex-direction: column!important;
        margin: 50px 0 0 0;
        .l{
          width: 100%;
          height: auto;
          padding: 20px;
          border-radius: 10px;
          margin: 0!important;
          .bor{
            width: 100%;
            height: 180px;
            border-radius: 10px;
            border: 3px solid #000;
            .common_bg{
              transform: scale(1.1);
            }
          }
        }
        .r{
          width: 100%;
          margin: 25px 0 0 0;
          .p1{
            font-size: 20px;
            margin: 0 0 15px;
          }
          .p2{
            font-size: 13px;
            line-height: 1.8;
          }
        }
      }
      .content3{
        margin: 30px 0 0 0;
        .end{
          margin: 15px 0 0 0;
          .swiper-pagination{
            width: 100px;
            height: 2px;
          }
          .num{
            margin: 0 0 0 15px;
            p,span{
              font-size: 14px;
            }
          }
        }
        .text{
          .p1{
            font-size: 20px;
            margin: 0 0 15px;
          }
          .p2{
            font-size: 13px;
            line-height: 1.8;
          }
          .p3{
            font-size: 13px;
            width: 100%;
            line-height: 1.8;
          }
        }
      }
    }
    .section3{
      padding: 25px 5%;
      .title{
        .p1{
          font-size: 24px;
        }
        .p2{
          font-size: 13px;
          line-height: 1.8;
        }
      }
      .content{
        margin: 25px 0 0 0;
        grid-template-columns: repeat(1,1fr);
        gap: 15px;
        .item{
          height: auto;
          border-radius: 7px;
          padding: 5%;
          flex-direction: column-reverse;
          .l{
            width: 100%;
            .t1{
              opacity: 1;
              font-size: 13px;
              line-height: 1.7;
              margin: 0 0 15px;
            }

            .t2{
              font-size: 18px;
              br{
                display: none;
              }
            }
          }
          .bor{
            width: 55px;
            height: 55px;
            margin: 0 0 15px;
            img{
              height: 30px;
            }
          }
        }
      }
    }
  }
}